<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/mist-list/mist-list.html">
<link rel="import" href="helpers/mist-lists-behavior.html">
<link rel="import" href="helpers/get-resource-from-incident-behavior.html">

<dom-module id="page-incidents">
    <template>
        <style include="shared-styles">
            .error {
                color: #d96557;
            }

            h2[slot="header"] {
                margin: 8px;
            }
        </style>
        <app-route route="{{route}}"></app-route>
        <template is="dom-if" if="[[_isListActive(route.path)]]" restamp>
            <mist-list id="incidentsList" expands resizable column-menu multi-sort apiurl="/api/v1/incidents" items="[[model.incidentsArray]]"
                name="Incidents" selected-items="{{selectedItems}}" filtered-items-length="{{filteredItemsLength}}"
                combined-filter={{combinedFilter}} frozen=[[_getFrozenLogColumn()]] visible=[[_getVisibleColumns()]]
                renderers=[[_getRenderers()]] user-filter=[[model.sections.incidents.q]]>
                <h2 slot="header">[[filteredItemsLength]] [[combinedFilter]] Incidents </h2>
                <p slot="no-items-found">Hooray! No Incidents found.</p>
            </mist-list>
        </template>
    </template>
    <script>
        Polymer({
            is: 'page-incidents',
            behaviors: [
                mistListsBehavior,
                getResourceFromIncidentBehavior
            ],
            properties: {
                model: {
                    type: Object
                }
            },
            listeners: {
                click: 'resizeList'
            },
            observers: [
                'incidentsChanged(model.incidents.*)'
            ],
            incidentsChanged: function (incidents) {
                if (incidents.path == 'model.incidents' && this.shadowRoot.querySelector('mist-list')) {
                    this.shadowRoot.querySelector('mist-list').fire('resize');
                }
            },
            _isListActive: function (path) {
                return !path;
            },
            _getFrozenLogColumn: function () {
                return ['started_at'];
            },

            _getVisibleColumns: function () {
                return ['resource_id', 'cloud_id', 'incident_id', 'error'];
            },
            // TODO compute columns for all resources' incidents
            _getRenderers: function () {
                var _this = this;
                return {
                    'started_at': {
                        'title': function (item) {
                            return item ? item.replace(/_/g, " ") : 'started at';
                        },
                        'body': function (item, row) {
                            var active = '';
                            if (!row.finished_at) {
                                active = '<strong class="error"> - Active now </strong>'
                            }
                            return '<span title="' + moment(item * 1000).format() + '">' + moment(item *
                                1000).fromNow() + '</span>' + active;
                        },
                        'cmp': function (item1, item2, row1, row2) {
                            if (item1 > item2) {
                                return 1;
                            } else if (item1 < item2) {
                                return -1;
                            }
                            return 0;
                        }
                    },
                    'resource_id': {
                        'title': function (item) {
                            return 'resource';
                        },
                        'body': function (item, row) {
                            var resource = _this._getResource(row, _this.model);
                            console.log('RESOURCE ===', resource)
                            // Resource may be missing. If not display link
                            if (resource) {
                                if (resource.id)
                                    return '<a href="/'+ resource.type +'s/' + resource.id +
                                        '" class="regular" style="color: #2196F3;">' + resource.name + '</a>';
                                if (resource.type == "organization")
                                    return 'Organization';
                                if (!resource.id && resource.type != "organization")
                                    return resource.name;
                            }
                            return row[resource.type+'_id']
                        }
                    },
                    'cloud_id': {
                        'title': function (item) {
                            return item ? item.replace(/_/g, " ") : 'cloud';
                        },
                        'body': function (item, row) {
                            return _this.model.clouds && _this.model.clouds[item] ? _this.model.clouds[
                                item].title : (item || '');
                        }
                    },
                    'error': {
                        'body': function (item, row) {
                            var classname = item ? 'error' : '';
                            return '<span class="' + classname + '">' + item + '</span>';
                        }
                    }
                }
            },
            resizeList: function (e) {
                if (e.path.indexOf(this.shadowRoot.querySelector('mist-list')))
                    this.shadowRoot.querySelector('mist-list').fire('resize');
            }
        });
    </script>
</dom-module>